<template>
    <div class="dataList">
        <div class="hdclass">
            <el-icon style="font-size: 20px">
                <Edit />
            </el-icon>
            数据列表123

        </div>
        <div>
            <el-button type="primary" @click="tianjiaclick">添加</el-button>
        </div>

    </div>
    <!-- 本页面 -->
    <div v-show="show_show">
        <el-table border style="width:100%" :data="tableData" class="borderyangshi">
            <el-table-column label="编号" prop="id" width="80"></el-table-column>
            <el-table-column label="菜单名称" prop="title" width="150"></el-table-column>
            <el-table-column label="菜单级数" width="150">
                <span>一级</span>
            </el-table-column>
            <el-table-column label="前端名称" prop="name" width="150"></el-table-column>
            <el-table-column label="前端图标" prop="icon" width="150"></el-table-column>
            <el-table-column label="是否显示" width="150">
                <template #default="scope">
                    <el-switch :value="scope.row.hidden === 0 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" width="150"></el-table-column>

            <el-table-column label="设置" width="150">
                <template #default="scope">
                    <el-button class="bgcblue" link @click="chakanxiajiclick(scope.row.id)">查看下级</el-button>
                </template>

                <!-- <template #default="scope">
                <el-switch :value="scope.row.hidden === 0 ? true : false" />
            </template> -->
            </el-table-column>

            <el-table-column label="操作" prop="" width="115">
                <template #default="scope">
                    <span @click="bianjiid(scope.row)" class="bgcblue">编辑</span>
                </template>

            </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            background :page-sizes="[2, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 二级页面 -->
    <div v-show="!show_show">
        <el-table border style="width:100%" :data="tableData" class="borderyangshi">
            <el-table-column label="编号" prop="id" width="80"></el-table-column>
            <el-table-column label="菜单名称" prop="title" width="150"></el-table-column>
            <el-table-column label="菜单级数" width="150">
                <span>二级</span>
            </el-table-column>
            <el-table-column label="前端名称" prop="name" width="150"></el-table-column>
            <el-table-column label="前端图标" prop="icon" width="150"></el-table-column>
            <el-table-column label="是否显示" width="150">
                <template #default="scope">
                    <el-switch :value="scope.row.hidden === 0 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" width="150"></el-table-column>

            <el-table-column label="设置" width="150">
                <el-button class="bgcblue" link disabled>查看下级</el-button>

            </el-table-column>

            <el-table-column label="操作" prop="" width="115">
                <template #default="scope">
                    <span @click="bianjiid(scope.row)" class="bgcblue">编辑</span>
                </template>

            </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            background :page-sizes="[2, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import useTabel from '../../hooks/useTables';
import * as api from "../../request/api"
import router from '../../router';
import { ref, watch } from "vue"
import { useRoute } from 'vue-router';
const route = useRoute()
// 请求
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.admin.getAdminmenu, {
    id: Number(route.query.id)
})

console.log("tableData0101", tableData);
// 添加
let tianjiaclick = () => {
    router.push("/ums/addMenu")
}
// 编辑
let bianjiid = (id: any) => {
    console.log(id.id);
    router.push(`/ums/addMenu?id=${id.id}`)
}
// 二级显示
let show_show = ref(true)
let chakanxiajiclick = async (id: any) => {
    // 点击之后跳转,显示,
    // 进行跳转
    router.push(`/ums/menu?id=${id}`)
    // 重新渲染
    getTableData()
    // 发请求
    let getAdminmenu = await api.admin.getAdminmenu(id)
    console.log("getAdminmenu", getAdminmenu);


    setTimeout(() => {
        router.go(0)
    });

}
watch(() => route.query.id,
    (newval) => {
        // 监听二级菜单的显示隐藏
        if (route.query.id) {
            // 点击显示二级菜单
            show_show.value = false
        } else {
            show_show.value = true

        }
        // setTimeout(() => {
        //     router.go(0)
        // });

    },
    { immediate: true }
)
</script>

<style scoped lang="scss">
.dataList {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    box-shadow: 2px 2px 5px 2px #888888;
    margin: 20px;
}

.fenye {
    float: right;
    margin: 20px 0;
}

.bgcblue {
    color: #4e77e6;
    font-size: 12px;
    cursor: pointer;
}

.borderyangshi {
    margin: 20px;
}
</style>